<template>
	<view class="cell-page">
        <u-cell-group>
            <u-cell size="large" title="仅文字"></u-cell>
            <u-cell size="large" title="左文字" value="右内容"></u-cell>
            <u-cell icon="setting" size="large" title="带图标的文字"></u-cell>
            <u-cell icon="setting" size="large" title="isLink时有右箭头,无跳转链接" isLink></u-cell>
            <u-cell icon="setting" size="large" title="跳转链接" isLink url="/pages/demo/select"></u-cell>
            <u-cell icon="setting" size="large" title="带图标的左文字" value="右内容带右箭头" isLink></u-cell>
        </u-cell-group>

        <u-cell-group title="自定义插槽">
            <u-cell value="内容" size="large">
                <view slot="title" class="u-slot-title">
                    <text class="u-cell-text">左插槽</text>
                    <u-tag text="标签" plain size="mini" type="warning"></u-tag>
                </view>
            </u-cell>
            <u-cell title="右插槽" isLink size="large">
                <text slot="value" class="u-slot-value">自定义内容</text>
            </u-cell>
            <u-cell title="右插槽" isLink size="large">
                <u-tag slot="value" text="标签" plain size="mini" type="warning"></u-tag>
            </u-cell>
            <u-cell title="Badge徽标数" isLink size="large">
                <u-badge slot="value" :value="1500" shape="horn"></u-badge>
            </u-cell>
        </u-cell-group>

        <u-cell-group>
            <u-cell title="第3组，测试" size="large"></u-cell>
            <u-cell title="第3组，测试" size="large"></u-cell>
        </u-cell-group>
	</view>
</template>
<script>
export default {
	data () {
		return {

		}
	},
	methods: {

	}
}
</script>
<style lang="scss">
.cell-page  {
    padding-bottom: 20px;
    width: 100%;
    height :100%;
    background-color: #f7f7f7;
    position: absolute;
    .u-cell-group{
        margin-bottom:20rpx;
    }
    .u-cell-group__title {
        padding:10rpx 32rpx 16rpx !important;
    }
    .u-cell-group__title__text{
        line-height: 50rpx !important;
    }
    .u-cell{
        background-color: #fff;
    }
    .u-line{
        border-color:#e9e9e9 !important;
    }
    /*自定义插槽 标签*/
    .u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
        .u-tag-wrapper {
            margin-left: 10rpx;
        }
	}
    /*右侧提示文本样式*/
    .u-slot-value{
        color:#999;
        font-size:26rpx;
    }
}

</style>